<template>
<h1>隐藏显示指令</h1>
<!-- v-if="布尔值"  -->
<p v-if="true">张三</p>
<p v-if="false">李四</p>
<p>王五</p>
  <hr>
<!--  v-if的值交给isShow响应式变量来控制 v-else是v-if取反-->
  <p v-if="isShow">月亮</p>
  <p v-if="isShow">星星</p>
  <p v-else>太阳</p>
  <hr>
<!-- v-if直接在HTML代码中删除元素
     v-show是修改元素的CSS属性display值为none,不会频繁删除创建,开销较小-->
  <p v-if="false">小红</p>
  <p v-show="false">小绿</p>
</template>

<script setup>
import {ref} from "vue";

const isShow=ref(true);
</script>

<style scoped>

</style>